<template>
    <div class="main">
        <div class="air-column">
            <h2>剩机人</h2>
            <el-form class="member-info">
                <div class="member-info-item" 
                v-for="(item,index) in form.users" 
                :key="index">
                    <el-form-item label="乘机人类型">
                        <el-input placeholder="姓名" 
                        class="input-with-select" 
                        v-model="item.username">
                            <el-select 
                            slot="prepend" 
                            value="1" 
                            placeholder="请选择">
                                <el-option label="成人" value="1"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="证件类型">
                        <el-input 
                        placeholder="证件号码"
                        class="input-with-select"
                        v-model="item.id" >
                            <el-select 
                            slot="prepend" 
                            value="1"           
                            placeholder="请选择">
                                <el-option label="身份证" value="1" :checked="true"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>

                    <span class="delete-user" @click="handleDeleteUser(index)">-</span>
                </div>
            </el-form>
            <el-button class="add-member" type='primary' @click="handleAddUsers">添加乘机人</el-button>
        </div>

        <div class="air-column">
            <h2>保险</h2>
            <div>
                <div class="insurance-item" 
                v-for="(item,index) in data.insurances" 
                :key="index">
                    <el-checkbox 
                    :label="`${item.type}：￥${item.price}/份×1  最高赔付${item.compensation}万`" 
                    @change="handleInsurance(item.id)"
                    border>
                    </el-checkbox> 
                </div>
            </div>
        </div>

        <div class="air-column">
            <h2>联系人</h2>
            <div class="contact">
                <el-form label-width="60px">
                    <el-form-item label="姓名">
                        <el-input v-model="form.contactName"></el-input>
                    </el-form-item>

                    <el-form-item label="手机">
                        <el-input placeholder="请输入内容" v-model="form.contactPhone">
                            <template slot="append">
                            <el-button @click="handleSendCaptcha">发送验证码</el-button>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="验证码">
                        <el-input v-model="form.captcha"></el-input>
                    </el-form-item>
                </el-form>   
                <el-button type="warning" class="submit" @click="handleSubmit">提交订单</el-button>
            </div>
        </div>
        <span v-show="false">{{allPrice}}</span>
    </div>
</template>

<script>
export default {
    props:{
        // 接收机票信息
         data:{
            type:Object,
            default:{}
        }
    },
    data(){
        return {
           form:{
                users: [{       // 用户列表
                    username: "",
                    id: "",
                }],
                insurances:[],//	保险id
                contactName:"",//联系人名字
                contactPhone:"",//联系人电话
                captcha:"",//手机验证码
                invoice:true,//是否需要发票
                seat_xid:"",//座位id
                air:0//航班id
           },
           
        }
    }, 
    computed:{
        // 计算总价格
        allPrice(){
            let price=0;
            
            if(!this.data.seat_infos) return;
            // 计算机票单价
            price+=this.data.seat_infos.org_settle_price;
            // 加上油钱
            price+=this.data.airport_tax_audlet
            // console.log(this.data.insurances[0])
            //加上保险*份数 
            if(this.data.insurances[0]){
                price+=this.data.insurances[0].price*this.form.insurances.length;
            }
            
            // 乘以人数
            price*=this.form.users.length;
            // console.log(price)
            this.$store.commit('air/setAllPrice',price)
        }
    },
    methods: {
        // 添加乘机人
        handleAddUsers(){
            this.form.users.push({
                 username: "",
                 id: "",
            })
        },
        
        // 移除乘机人
        handleDeleteUser(index){
            this.form.users.splice(index,1)
        },
        
        //添加选中的保险数据
        handleInsurance(id){
            let index=this.form.insurances.indexOf(id)
            if(index>-1){
                this.form.insurances.splice(index,1)
            }else{
                this.form.insurances.push(id)
            }            
        },

        // 发送手机验证码
        async handleSendCaptcha(){
            // console.log(this.form.contactPhone)
            const code = await this.$store.dispatch('user/captcha',this.form.contactPhone)
            this.$message(`${code}`);
        },

        // 提交订单
        handleSubmit(){
            const {id:air,seat_xid}=this.$route.query
            this.form={...this.form,seat_xid,air};
            this.form.air = this.form.air * 1
            const {user: {userInfo}} = this.$store.state;
            // console.log(this.form);            
            this.$axios({
                url:'/airorders',
                method:"post",
                data:this.form,
                headers: {
                Authorization: `Bearer ${userInfo.token || 'NO TOKEN'}`
            }
            }).then(res=>{
                console.log(res.data);
                 // 跳转到付款页
                this.$router.push({
                    path: "/air/pay",
                    query:{id:res.data.id}
                });
            })
        }
    }
}
</script>

<style scoped lang="less">
    .air-column{
        border-bottom:1px #ddd dashed;
        padding-bottom: 20px;   
        margin-bottom: 20px;
    }

    .air-column h2{
        margin-bottom: 20px;
        font-size: 22px;
        font-weight: normal;
    }

    /deep/ .el-select .el-input {
        width: 130px;
    }

    .input-with-select{
        width:590px;
    }

    .input-with-select /deep/  .el-input-group__prepend {
        background-color: #fff;
    }
    .member-info /deep/ .el-form-item{
        margin-bottom:0;
    }

    .member-info-item{
        border-bottom:1px #eee dashed;
        padding-bottom: 20px;
        position: relative;

        &:first-child{
            .delete-user{
                display: none;
            }
        }
    }

    .add-member{
        margin-top:20px;
    }

    .delete-user{
        display: block;
        background:#ddd;
        width:16px;
        height:16px;
        font-size:14px;
        text-align: center;
        line-height: 16px;
        color:#fff;
        cursor: pointer;
        border-radius: 50px;
        position:absolute;
        right:-30px;
        top:50%;
    }

    .insurance{
        > div{
            margin-top:10px;
        }
    }

    .insurance-item{
        margin-bottom: 20px;
    }

    .contact{
        /deep/ .el-input{
            width:50%;
        }
    }

    .submit{
        margin: 50px auto;
        display: block;
        width:250px;
        height:50px;
    }
</style>